﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑封面</title>
    <link href="~/Content/cover/canvas.css" rel="stylesheet" />
    <script src="~/Content/cover/canvas.js"></script>
</head>

<body>
    <canvas id="canvas" width="460" height="300" style="border:1px solid #ccc;display: block;">
        当前浏览器不支持canvas
    </canvas>
    <table class="table">
        <tr>
            <td class="title">标题</td>
            <td class="content">
                <input class="text" type="text" id="course_type" value="网站的开发与部署" placeholder="例：网站的开发与部署" onchange="javascript:{ draw(); }">
                <input class="size" type="number" id="course_type_size" value="40" onchange="javascript:{ draw(); }">
                <a class="color" id="course_type_display_color" href="javascript:void(0)" onclick="javascript:{ document.getElementById('course_type_color').click(); }"></a>
                <input type="color" id="course_type_color" value="#f0f0f0" onchange="javascript:{
                            var _color = document.getElementById('course_type_color').value;
                            document.getElementById('course_type_display_color').style.backgroundColor = _color;
                            draw();
                        }">
            </td>
        </tr>
        <tr>
            <td class="title">背景颜色</td>
            <td class="content">
                <a class="back_left" href="javascript:void(0)" id="back_color_left_display" onclick="javascript:{ document.getElementById('back_color_left').click(); }"></a>
                <input type="color" id="back_color_left" value="#3499db" onchange="javascript:{
                    var _color = document.getElementById('back_color_left').value;
                    document.getElementById('back_color_left_display').style.backgroundColor = _color;
                    draw();
                }">
                <a class="back_right" href="javascript:void(0)" id="back_color_right_display" onclick="javascript:{ document.getElementById('back_color_right').click(); }"></a>
                <input type="color" id="back_color_right" value="#3499db" onchange="javascript:{
                    var _color = document.getElementById('back_color_right').value;
                    document.getElementById('back_color_right_display').style.backgroundColor = _color;
                    draw();
                }">
            </td>
        </tr>
        <tr style="display:none;">
            <td class="title">
                图片素材
                <input type="file" id="uploadImgFile" onchange="readFile(this)" style="display:none;">
            </td>
            <td class="content">
                <a class="upload" href="javascript:void(0)" onclick="javascript:{ document.getElementById('uploadImgFile').click(); }">上传</a>
            </td>
        </tr>
        <tr style="display:none;">
            <td class="title">
                &nbsp;
            </td>
            <td class="content">
                <div class="img_class" id="img_class">
                </div>
            </td>
        </tr>
        <tr>
            <td class="title">
                背景图片
            </td>
            <td class="content">
                <div class="img_class_select" id="img_class_select">
                    <img src="/Content/CourseBackground/b1.jpg" alt="">
                    <img src="/Content/CourseBackground/b2.jpg" alt="">
                    <img src="/Content/CourseBackground/b3.jpg" alt="">
                    <img src="/Content/CourseBackground/b4.jpg" alt="">
                    <img src="/Content/CourseBackground/b5.jpg" alt="">
                    <img src="/Content/CourseBackground/b6.jpg" alt="">
                    <img src="/Content/CourseBackground/b7.jpg" alt="">
                    <img src="/Content/CourseBackground/b8.jpg" alt="">
                    <img src="/Content/CourseBackground/b9.jpg" alt="">
                    <img src="/Content/CourseBackground/b10.jpg" alt="">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="operation">
                <input type="button" value="保存" onclick="javascript: { save_win(); }">
                <input type="button" value="关闭" onclick="javascript: { close_win(); }">
            </td>
        </tr>
    </table>
    <script>
        var canvas = new Canvas('canvas');
        canvas.callback.mouseSelected = function (obj) {
            console.log(obj);
        };
        document.getElementById('back_color_left').onchange();
        document.getElementById('back_color_right').onchange();
        document.getElementById('course_type_color').onchange();
        draw();
        function draw() {
            canvas.clearElement();
            var elms = [];
            canvas.option.fillColor = document.getElementById('back_color_left').value;
            canvas.option.fillColor2 = document.getElementById('back_color_right').value;

            var imgList = document.getElementsByName('canvas_child_img');
            for (var img of imgList) {
                var canvas_img = canvas.newImage(img, img.width, img.height);
                elms.push(canvas_img);
            }

            var course_type = canvas.newTexture();
            course_type.title = document.getElementById('course_type').value;
            course_type.fontSize = document.getElementById('course_type_size').value;
            course_type.y = parseInt(document.getElementById('course_type_size').value) + 30;
            course_type.x = 60;
            course_type.color = document.getElementById('course_type_color').value;
            elms.push(course_type);

            canvas.addElements(elms);
            canvas.draw();
        };

        function readFile(obj) {
            var file = obj.files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var img = new Image;
                img.name = 'canvas_child_img';
                img.src = this.result;
                img.onclick = function (ev) {
                    document.getElementById('img_class').removeChild(ev.srcElement);
                    draw();
                };
                img.onload = function () {
                    document.getElementById('img_class').appendChild(img);
                    draw();
                };
            }
        };

        document.getElementById('img_class_select').onclick = function (ev) {
            if (ev.srcElement.localName == 'img') {
                var panelDiv = document.getElementById('img_class_select');
                var panelDivDisplay = document.getElementById('img_class');
                var displayImg = panelDivDisplay.getElementsByTagName('img')[0];
                var imgList = panelDiv.getElementsByTagName("img");
                for (var _img of imgList) {
                    _img.className = '';
                }
                var isNoRepeat = true;

                if (displayImg) {
                    var displaySrc = displayImg.src;
                    var selectedSrc = ev.srcElement.src;
                    if (displaySrc == selectedSrc) {
                        isNoRepeat = false;
                    }
                }

                panelDivDisplay.innerHTML = '';
                if (isNoRepeat) {
                    ev.srcElement.className = 'active';
                    var img = new Image;
                    img.name = 'canvas_child_img';
                    img.src = ev.srcElement.src;
                    panelDivDisplay.appendChild(img);
                }
                draw();
            }
        };

        function save_win() {
            window.parent.cover_data = canvas.option.canvas.toDataURL("image/png");
            window.parent.save_cover();
        };

        function close_win() {
            window.parent.close_cover();
        };
    </script>
</body>

</html>